<template>
  <div>
    <el-row>
      <el-col :span="8" :offset="7">

  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
    <el-form-item label="申报方式" prop="adminType">
      <el-select v-model="ruleForm.adminType" placeholder="请选择申报方式" style="width:370px" >
        <el-option label="组织推荐" value="组织"></el-option>
        <el-option label="个人申报" value="个人"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="标题" prop="title">
      <el-input v-model="ruleForm.title" style="width:370px"></el-input>
    </el-form-item>
    <el-form-item label="申报人" prop="loginName">
      <el-input v-model="ruleForm.loginName" style="width:370px"></el-input>
    </el-form-item>
    <el-form-item label="选择性别" prop="gender">
      <el-radio-group v-model="ruleForm.gender">
        <el-radio label="0">男</el-radio>
        <el-radio label="1">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="选择证件类别" prop="idType">
      <el-select v-model="ruleForm.idType" placeholder="请选择证件类别" style="width:370px">
        <el-option label="身份证" value="1"></el-option>
        <el-option label="港澳居民来往大陆通行证" value="2"></el-option>
        <el-option label="台湾居民来往大陆通行证" value="3"></el-option>
        <el-option label="护照" value="4"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="身份证号码" prop="idNumber">
      <el-input v-model="ruleForm.idNumber" style="width:370px"></el-input>
    </el-form-item>
    <el-form-item label="输入手机号码" prop="tel">
      <el-input v-model="ruleForm.tel" style="width:370px"></el-input>
    </el-form-item>
    <el-form-item label="验证邮箱" prop="email">
      <el-input v-model="ruleForm.email" style="width:370px"></el-input>
    </el-form-item>
    <el-form-item label="推荐组织" prop="organization">
      <el-input v-model="ruleForm.organization" style="width:370px"></el-input>
    </el-form-item>
    <el-form-item label="推荐组织/个人所在地" prop="address">
      <el-input v-model="ruleForm.address" style="width:370px"></el-input>
    </el-form-item>
    <el-form-item label="组织/个人紧急联系电话" prop="phone">
      <el-input v-model="ruleForm.phone" style="width:370px"></el-input>
    </el-form-item>
    <el-form-item label="选择组织类型" prop="organtype" >
      <el-select v-model="ruleForm.organtype" style="width:370px" >
        <el-option label="中央新闻网站" value="1"></el-option>
        <el-option label="地方新闻网站" value="2"></el-option>
        <el-option label="商业网站" value="3"></el-option>
        <el-option label="行业媒体" value="4"></el-option>
        <el-option label="自媒体平台" value="5"></el-option>
        <el-option label="自媒体账号" value="6"></el-option>
        <el-option label="电子商务平台" value="7"></el-option>
        <el-option label="党政机关" value="8"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button><!--还没写跳转的下一步的URL路径-->
    </el-form-item>
  </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'BaseInfo',
  data () {
    return {
      choice: '',
      tableId: '',
      ruleForm: {
        adminType: '',
        title: '',
        loginName: '',
        gender: '0',
        idType: '',
        idNumber: '',
        tel: '',
        email: '',
        organization: '',
        address: '',
        phone: '',
        organtype: ' 中央新闻网站'
      },
      rules: {
        adminType: [
          {required: true, message: '请选择申报方式', trigger: 'change'}
        ],
        title: [
          {required: true, message: '请输入标题', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在3到5个字符', trigger: 'blur'}
        ],
        loginName: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        idType: [
          {required: true, message: '请选择证件类别', trigger: 'change'}
        ],
        // 证件共同的校验规则
        idNumber: [
          {required: true, message: '请输入证件号', trigger: 'blur'}
        ],
        // 手机号校验，允许首尾有空字符串出现
        tel: [
          {required: true, message: '请输入手机号码', trigger: 'blur'},
          // eslint-disable-next-line no-useless-escape
          {pattern: /^\s*(1\d{10})\s*$/, message: '请输入正确的手机号码', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
        ],
        organization: [
          {required: true, message: '请输入推荐组织', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入推荐组织/个人所在地', trigger: 'blur'}
        ],
        // 电话校验,允许首尾有空字符串出现
        phone: [
          {required: true, message: '请输入组织/个人紧急联系电话', trigger: 'blur'},
          {pattern: /(^\s*(0\d{2,3}-?\d{7,8})\s*$)|(^\s*(1\d{10})\s*$)/, message: '请输入正确的组织/个人紧急联系电话', trigger: 'blur'}
        ]
      }
    }
  },
  watch: {
    'ruleForm.idType': function (val) {
      this.val = val
      if (val === '1') {
        Object.assign(this.rules, {
          idNumber: [
            {pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/, message: '请输入正确证件号', trigger: 'blur'}
          ]
        })
      } else if (val === '2') {
        Object.assign(this.rules, {
          idNumber: [
            {pattern: /^[a-zA-Z0-9]{6,10}$/, message: '请输入正确的证件号', trigger: 'blur'}
          ]
        })
      } else if (val === '3') {
        Object.assign(this.rules, {
          idNumber: [
            {pattern: /^([0-9]{8}|[0-9]{10})$/, message: '请输入正确的证件号', trigger: 'blur'}
          ]
        })
      } else if (val === '4') {
        Object.assign(this.rules, {
          idNumber: [
            {pattern: /^[a-zA-Z0-9]{5,17}$/, message: '请输入正确的证件号', trigger: 'blur'}
          ]
        })
      }
    }
  },
  methods: {
    // 这里把提交和检验放在一个函数里进行判断
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!')
          // eslint-disable-next-line no-unused-expressions
          this.$axios.post('/baseInfo', {
            userId: 3, // 死数据userid 为1
            choice: this.choice, // 死数据为榜样通道
            pstatus: '0', // 死数据表示暂存
            adminType: this.ruleForm.adminType,
            title: this.ruleForm.title,
            loginName: this.ruleForm.loginName,
            gender: this.ruleForm.gender,
            idType: this.ruleForm.idType,
            idNumber: this.ruleForm.idNumber,
            tel: this.ruleForm.tel,
            email: this.ruleForm.email,
            organization: this.ruleForm.organization,
            address: this.ruleForm.address,
            phone: this.ruleForm.phone,
            organtype: this.ruleForm.organtype
          }
          ).then(res => {
            if (res.data.code === 0) {
              this.tableId = res.data.data
              console.info(this.tableId)
              this.routerTo()
            } else {
              console.info('no')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    routerTo: function () {
      switch (this.choice) {
        case 'activity':
          this.$router.push({name: 'Activity', params: {id: this.tableId}})
          break
        case 'animeVedio':
          this.$router.push({name: 'AnimeVedio', params: {id: this.tableId}})
          break
        case 'modelDeed':
          this.$router.push({name: 'ModelDeed', params: {id: this.tableId}})
          break
        case 'article':
          this.$router.push({name: 'Article', params: {id: this.tableId}})
          break
        case 'picture':
          this.$router.push({name: 'Picture', params: {id: this.tableId}})
          break
        default : break
      }
    }
  },
  created () {
    this.choice = this.$route.params.portType
    console.info(this.choice)
  }
}
</script>

<style scoped>

</style>
